<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/ng-file-upload-shim/ng-file-upload.js"></script>
    <script src="bower_components/ng-file-upload/ng-file-upload.js"></script>

</head>
<body ng-app="fileUpload" ng-controller="MyCtrl">
<h4>Upload on file select</h4>
<button type="file" ngf-select="uploadFiles($file, $invalidFiles)"
        accept="image/*" ngf-max-height="1000" ngf-max-size="1MB">
    Select File</button>
<br><br>
File:
<div style="font:smaller">{{f.name}} {{errFile.name}} {{errFile.$error}} {{errFile.$errorParam}}
    <span class="progress" ng-show="f.progress >= 0">
          <div style="width:{{f.progress}}%"
               ng-bind="f.progress + '%'"></div>
      </span>
</div>
{{errorMsg}}
<script>
    //inject angular file upload directives and services.
    var app = angular.module('fileUpload', ['ngFileUpload']);

    app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) {
        $scope.uploadFiles = function(file, errFiles) {
            $scope.f = file;
            $scope.errFile = errFiles && errFiles[0];
            if (file) {
                file.upload = Upload.upload({
                    url: 'upload',
                    data: {file: file}
                });

                file.upload.then(function (response) {
                    $timeout(function () {
                        file.result = response.data;
                    });
                }, function (response) {
                    if (response.status > 0)
                        $scope.errorMsg = response.status + ': ' + response.data;
                }, function (evt) {

                    file.progress = Math.min(100, parseInt(100.0 *
                            evt.loaded / evt.total));
                });
            }
        }
    }]);
</script>
</body>
</html>